上一篇文章：http://ithelp.ithome.com.tw/question/10156981
CSS跟上一章介紹的<script>標籤有點類似，
大多寫在網頁的表頭標籤裡面。基礎的架構如下：
<style type=”text/css”>
selector {
property1:value; 作者註解—寫法為「屬性: 值」。
property2:value;
..
propertyN:value;
}
</style>
我們直接用範例CSS_01.html來說明最快（如下圖），
所謂的selector就是指向「下面的<h1>標籤」，
當我們指定<h1>標籤的文字大小、顏色之後，整個網頁的<h1>標籤都會統一管理，
日後要更換<h1>標題的文字與顏色，只要在表頭的CSS統一管理就行了，
不需要深入網頁更改每一個<h1>標籤。
[img=415,342]http://ithelp.ithome.com.tw/upload/images/20140929/201409290950045428bacce6ea6_resize_600.jpg[/img]
如果您的CSS設定太龐大，便可以寫在另外一個.css檔案中這是一個純文字檔）。
一樣寫在網頁表頭標籤裡面，寫法如下：
<link rel="stylesheet" type="text/css" href="自己的檔名.css" media="screen">
[img=415,162]http://ithelp.ithome.com.tw/upload/images/20140929/201409290950195428badc00722_resize_600.jpg[/img]
在此要推薦微軟說的「當今世界上，最強的開發工具」 -- Visual Studio
您可以到此下載免費的Express版本，記得喔！！要下載 for Web版才是網頁用的！
http://www.visualstudio.com/downloads/download-visual-studio-vs#d-express-web
操作步驟如下：
先開一個「新網站」
然後在畫面右側的「方案總管」，請點選您的網站或目錄之後
再按下「滑鼠右鍵」，加入一個CSS檔（樣式表）
[img=415,270]http://ithelp.ithome.com.tw/upload/images/20140929/201409290950305428bae6e5e85_resize_600.jpg[/img]
[img=415,162]http://ithelp.ithome.com.tw/upload/images/20140929/201409290950465428baf6bc227_resize_600.jpg[/img]
完成CCS檔以後，如下圖，
請在您的網頁HTML檔裡面，引用剛剛的CSS檔案。
[img=415,126]http://ithelp.ithome.com.tw/upload/images/20140929/201409290951015428bb059f440_resize_600.jpg[/img]
另一種selector的寫法：
下方**CSS裡面的「div.xyz」**是針對<div>標籤，加上class=”xyz”來體現CSS效果。
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type=”text/css”>
div.xyz {
width: 100px;
}
</style>
<div class="xyz"> 簡單的CSS寫法 </div>
善用瀏覽器的工具與偵錯
我們使用IE 11瀏覽器裡面有開發人員的工具
可以針對網頁進行偵錯與比對。只需按下「F12」按鍵即可。
[img=415,306]http://ithelp.ithome.com.tw/upload/images/20140929/201409290951325428bb24767d3_resize_600.jpg[/img]
您可以點選不同的HTML碼或是CSS，立刻對照畫面上的成果
不光是IE瀏覽器有這功能，大部分瀏覽器都有提供類似的 Debug工具
下一篇文章：http://ithelp.ithome.com.tw/question/10157184
===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材
MIS2000 Lab. 周棟祥/吳進魯
出版商:碁峰
出版日期：2015-04-09
語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750
PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110
iThome鐵人賽
看影片追技術